import { API,BASE_PATH } from "@/config"
import requewt from "@/utils/requewt"
import { AutoCenter, Button, DotLoading, Form, Input, Modal, Space, Toast } from "antd-mobile"
import callFeedback from "../modalFeedback"
import { useToolbar } from "../toolbar/useToolbar"
import useApp from "@/stores/useApp"
import { useEffect,  useState } from "react"

const InviteListModal = () => {
    const [inviteList, setInviteList] = useState([])
    const [loading,setLoading] = useState(true)
    useEffect(() => {
        requewt(API.user.inviteList).then(({data}) => {
            setInviteList(data||[])
            setLoading(false)
        })
    }, [])
    return (
        <AutoCenter>
            <div className="text-center text-qy-bold" style={{fontSize:'2rem'}}>好友助力</div>
            {
                loading?<DotLoading /> :
                inviteList.length>0?<Space block justify="center" direction="vertical" style={{marginTop:'20px'}}>
                {
                    inviteList.map(({name,id})=> (
                        <div className="text-center" key={id}>{name}</div>
                    ))
                }
            </Space>: <AutoCenter>暂无数据</AutoCenter>
            }
        </AutoCenter>
    )
}
const ShareComp = () => {
    const [form] = Form.useForm()
    const { handleShowMsg } = useToolbar()
    const user = useApp(state => state.user)
    const updateUser = useApp(state => state.updateUser)
    const submitUserInvite = (invite_code) => {

        return requewt(API.user.userInvite,{method:'POST',headers: {'Content-Type':'multipart/form-data'}, body: {invite_code}})
    }
    useEffect(() => {
        requewt(API.user.userinfo).then((resp) => {
            if (resp.error_code === 0) {
                return updateUser(resp.data)
            }
            handleShowMsg(resp.msg, ()=> {

            })
        })
    }, [])
    const handleShowInvite = () => {
        const m = callFeedback({
            
            title: <div >
              <img className="header-img" src={`${BASE_PATH}/img/game/invite-modal-icon.png`} width='94' style={{right:'4%'}} />
              {/* <img src={`${BASE_PATH}/img/game/modal-icon-1.png`} className="modal-icon-1" alt="" width='20' />
              <img src={`${BASE_PATH}/img/game/modal-icon-2.png`} className="modal-icon-2" alt="" width='53' />
              <img src={`${BASE_PATH}/img/game/modal-icon-3.png`} className="modal-icon-3" alt="" width='32' /> */}
            </div>,
            hideClose:true,
            content: <div style={{minHeight:'30vh'}}>
                <InviteListModal />
            </div>,
            actions: [
              <Button key="back" className="act-btn act-btn-bevel act-btn-bevel-2" onClick={()=>m.close()}>返 回</Button>
            ]
          })
    }
    return (
        <div className="share-comp">
            <div className="text-center text-qy-bold" style={{fontSize:'2rem',lineHeight:2.5}}>邀请有礼</div>
          
            <Space block direction="vertical" justify="center" style={{'--gap':'10px',textAlign:'center'}} >
                <div style={{fontSize:'1.2rem'}}>您作为游戏玩家，分享您的邀请码给好友<br />每成功邀请一名好友注册登录启源APP/小程序<br />且好友进入游戏填入您的邀请码，即获取一次游戏机会</div>
            <div className="text-center text-qy-bold" style={{fontSize:'2rem',margin:'1rem 0'}}>
                我的邀请码：{user?.invite_code}
            </div>
            <Space block direction="horizontal" align="center" justify="center" style={{'--gap':'4px'}}>
                    <span style={{fontSize:'2rem'}}>已成功邀请{user?.invite_num}人</span>
                    <Button className="act-btn act-btn-bevel act-btn-bevel-2" onClick={handleShowInvite} >查 看</Button>
                </Space>
            </Space>
        </div>
    )
}
export const HelpingComp = () => {
    const [form] = Form.useForm()
    const { handleShowMsg } = useToolbar()
    const {invite_code} = useApp(state => state.user)
    const submitUserInvite = (invite_code) => {

        return requewt(API.user.userInvite,{method:'POST',headers: {'Content-Type':'multipart/form-data'}, body: {invite_code}})
    }
   return (
    <div className="share-comp">
        <div className="text-center text-qy-bold" style={{fontSize:'2rem',lineHeight:2.5}}>好友助力</div>
        <div className="text-center" style={{lineHeight:1.5,fontSize:'1.4rem'}}>请输入您好友给您分享的邀请码，为他助力！</div>
        <div className="text-center" style={{fontSize:'1.125rem'}}>（您作为新用户有且只有一次助力机会，不能重复助力）</div>
        <Form form={form}>
            <Form.Item
            name='invite_code'
            >
                <Input placeholder="请输入好友邀请码" style={{textAlign:'center'}} />
            </Form.Item>
            
        </Form>
        <AutoCenter>
        <Space block justify="between">
        <Button className="act-btn act-btn-bevel act-btn-bevel-2 " onClick={()=> {
            Modal.clear()
        }} >返 回</Button>
        <Button className="act-btn act-btn-bevel act-btn-bevel-2 " onClick={()=> {
            const reg = /^[a-zA-Z0-9]*$/
            if(!reg.test(form.getFieldValue('invite_code'))) {
                return Toast.show('请输入数字和字母')
            }
            
            // 
            if (form.getFieldValue('invite_code') === invite_code) {
                return handleShowMsg(`很遗憾<br/>不能输入自己的邀请码`)
            }
            Toast.show({
                content: '加载中',
                icon: 'loading',
                duration: 0
            })
            submitUserInvite(form.getFieldValue('invite_code')).then((resp) => {
                Toast.clear()
                handleShowMsg(resp?.msg, () => {
                    if (resp.error_code === 0) {
                        Modal.clear()
                    }
                    // Modal.clear()
                    // requewt(API.user.userinfo).then((resp) => {
                    //     if (resp.error_code !== 0) {
                    //         handleShowMsg(resp.msg, ()=> {

                    //         })
                    //     }
                        
                    // })
                })
            })
        }} >提 交</Button>
        </Space>
        </AutoCenter>
    </div>
   )
}
export default ShareComp